<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件对象、修饰符</title>
    <!-- <script src="https://unpkg.com/vue@3.5.21/dist/vue.global.js"></script> -->
    <script src="../assets/vue3.js"></script>

     <style>
        .container , .child{
            border: solid 1px red;
             border-radius: 10px;
             cursor: pointer;

        }

        .container{
            width: 300px;
            height: 300px;
            position: relative;
            background: #000;
            
        }

        .child{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: skyblue;
        }


    </style>
</head>

<body>
    <div id="app">

        <button v-on:click="btnClick">点我1</button> <br>
        <button @click="btnClick">点我2</button><br>

        <!-- 事件修饰符  -->
        <button @click.once="btnClick">点我3</button><br>

        <!-- $event 表示事件独享，类似于原生的 window.event -->
        <input type="text" @keydown="keyDown($event)"> <br>


        <a href="http://www.baidu.com" @click="clickHref1($event)">点我跳转1</a><br>


        <!-- 事件修饰符  @click.prevent   -->
        <a href="http://www.baidu.com" @click.prevent="clickHref2()">点我跳转2</a><br>



        <div class="container" @click="clickContainer()">

            <div class="child" @click.stop="clickChild()">

        </div>


    </div>




    </div>




    <script>
        let app = Vue.createApp({
            data() {
                return {

                    colorValue: 'red',
                    bgColor: 'skyblue'

                }
            },
            methods: {
                btnClick() {
                    console.log(this);
                    console.log(app);

                    console.log("按钮被点击了");

                },
                keyDown(event) {
                    console.log(event);
                },
                clickHref1(event) {
                    event.preventDefault();
                    console.log("超链接被点击");
                },

                clickHref2() {

                    console.log("超链接被点击");
                },
                clickContainer() {
                    console.log("父容器被点击....");
                },
                clickChild() {

                   console.log("子元素被点击....");
                }


            }
        }).mount("#app")
    </script>
</body>

</html>